<template>
  <div>
    <a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="rules">
      <!-- <a-form-model-item label="适用性别" prop="gender">
        <a-select v-model="form.gender" show-search style="width: 220px">
          <a-select-option value="1"> 男 </a-select-option>
          <a-select-option value="0"> 女 </a-select-option>
          <a-select-option value="2"> 通用 </a-select-option>
        </a-select>
      </a-form-model-item> -->
      <a-form-model-item label="来源" prop="originSource">
        <a-select v-model="form.originSource" show-search style="width: 220px">
          <a-select-option :value="item.code" v-for="item in originList" :key="item.code">
            {{ item.title }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="评级" prop="level">
        <a-select v-model="form.level" show-search style="width: 220px">
          <a-select-option :value="item.value" v-for="item in levelInfo" :key="item.value">
            {{ item.key }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item label="上下架状态" prop="status">
        <a-radio-group v-model="form.status" @change="shelfParameter">
          <a-radio :value="0"> 下架 </a-radio>
          <a-radio :value="1"> 上架 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="是否公开" prop="isPublish">
        <a-radio-group v-model="form.isPublish" @change="shelfParameter">
          <a-radio :value="1"> 公开 </a-radio>
          <a-radio :value="2"> 不公开 </a-radio>
        </a-radio-group>
      </a-form-model-item>

      <a-form-model-item label="图片/视频支持带商品推广" prop="isCreateBill">
        <a-radio-group v-model="form.isCreateBill">
          <a-radio value="1"> 是 </a-radio>
          <a-radio value="0"> 否 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="允许其他渠道使用" prop="otherChannelCanUse">
        <a-radio-group v-model="form.otherChannelCanUse" @change="shelfParameter">
          <a-radio value="1"> 允许 </a-radio>
          <a-radio value="0"> 不允许 </a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-form-model-item label="*  易盾机审"> {{ machine[form.yidunMachine] }} </a-form-model-item>
      <a-form-model-item label="*  易盾人审"> {{ manual[form.yidunManual] }} </a-form-model-item>
      <a-form-model-item label="*  审核状态"> {{ auditing[form.auditingStatus] }} </a-form-model-item>
      <a-form-model-item label="效果图">
        <JImageUpload :uploadParams="getUploadParams()" :isMultiple="true" :fileSize="10" :number="10" :accept="'image/*'" @fileChange="fileImageChange" v-model="imgList"></JImageUpload>
        <div class="upload__tip" style="line-height: 16px">图片小于10mb，格式jpg、png，最多10张。建议像素670X720。</div>
      </a-form-model-item>
      <a-form-model-item label="效果视频">
        <JImageUpload :uploadParams="getUploadParams()" :isMultiple="false" :fileSize="300" :number="1" :accept="'video/*'" @fileChange="fileVideoChange" v-model="videoList"></JImageUpload>
        <div class="upload__tip" style="line-height: 16px">视频小于300mb</div>
      </a-form-model-item>
      <template v-for="tag in tags">
        <a-form-model-item style="margin-bottom: 0" :label="tag.title">
          <template v-for="t in tag.children">
            <a-checkable-tag :key="t.code" :checked="form.labelList.indexOf(t.code) > -1" @change="checked => handleTagChange(t.code, checked)">
              {{ t.title }}
            </a-checkable-tag>
          </template>
        </a-form-model-item>
      </template>
    </a-form-model>
  </div>
</template>
<script>
import JImageUpload from '@/components/qiniuUpload/JImageUpload.vue'
import { querySysCateTree } from '@api/box/api'
import globalData from '@/assets/js/common'
import { mixin } from '../mixin'
export default {
  mixins: [mixin],
  components: {
    JImageUpload
  },
  data() {
    return {
      form: {
        level: '99',
        status: '', //上架
        isPublish: '', //是否公开
        gender: '',
        originSource: '', // 来源
        isCreateBill: '1',
        otherChannelCanUse: '',
        videoList: [],
        imgList: [],
        labelList: [],
        coverUrl: '',
        videoUrl: '',
        status: '' //上架
      },
      tags: {},
      videoList: [],
      imgList: [],
      levelInfo: [
        {
          key: '未评级',
          value: '99'
        },
        {
          key: 'S级',
          value: '10'
        },
        {
          key: ' A级',
          value: '20'
        },
        {
          key: ' B级',
          value: '30'
        }
      ],
      machine: {
        1: '通过',
        2: '不通过',
        3: '审核中'
      },
      manual: {
        1: '通过',
        2: '不通过',
        3: '审核中'
      },
      auditing: {
        1: '通过',
        2: '不通过',
        3: '审核中'
      },
      originList: [],
      rules: {
        gender: [{ required: true, message: '请选择', trigger: 'blur' }],
        level: [{ required: true, message: '请选择', trigger: 'blur' }],
        originSource: [{ required: true, message: '请选择', trigger: 'blur' }],
        isCreateBill: [{ required: true, message: '请选择', trigger: 'blur' }],
        otherChannelCanUse: [{ required: true, message: '请选择', trigger: 'blur' }],
        status: [{ required: true, message: '请选择', trigger: 'blur' }],
        isPublish: [{ required: true, message: '请选择', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getSysCateTree()
    this.getSysCate()
  },
  methods: {
    // 上传图片
    getUploadParams() {
      return { ...globalData.uploadParams }
    },
    fileImageChange(list) {
      this.form.imgList = list
    },
    fileVideoChange(list) {
      this.form.videoList = list
      let coverUrl = list.map(item => item.url)
      this.form.coverUrl = coverUrl.map(item => {
        return `${item}?vframe/jpg/offset/1`
      })
      this.form.videoUrl = list.map(item => item.url) // 视频url
    },
    handleTagChange(tag, checked) {
      const { labelList } = this.form
      const nextSelectedTags = checked ? [...labelList, tag] : labelList.filter(t => t !== tag)
      this.form.labelList = nextSelectedTags
    },
    // 标签
    getSysCateTree() {
      querySysCateTree('B08')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = JSON.parse(JSON.stringify(result))
            data.splice(1, 2)
            this.tags = data
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //传参数
    shelfParameter() {
      const shelfParameter = {
        isPublish: this.form.isPublish,
        status: this.form.status,
        otherChannelCanUse: this.form.otherChannelCanUse
      }
      this.$emit('shelfParameter', shelfParameter)
    },
    // 分类 来源
    getSysCate() {
      querySysCateTree('B10')
        .then(res => {
          const { code, result, message } = res
          if (code == 0) {
            let data = JSON.parse(JSON.stringify(result))

            this.originList = data
          } else {
            this.$message.error(message)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 重置
    reset() {
      this.form = {
        level: '99',
        gender: '',
        originSource: '', // 来源
        isCreateBill: '1',
        otherChannelCanUse: '',
        videoList: [],
        imgList: [],
        labelList: [],
        isPublish: '',
        status: ''
      }
      this.videoList = []
      this.imgList = []
    },
    // 回显
    setData(value) {
      console.log(value, '通用参数')

      this.form.yidunMachine = value.yidunMachine
      this.form.yidunManual = value.yidunManual
      this.form.auditingStatus = value.auditingStatus
      this.form.otherChannelCanUse = value.otherChannelCanUse.toString()
      console.log(this.form.otherChannelCanUse, 'this.form.otherChannelCanUse')
      this.form.level = value.level
      this.form.originSource = value.originSource
      this.form.isPublish = value.isPublish //是否公开
      this.form.status = value.status //上架
      this.form.gender = value.gender ? value.gender + '' : ''
      this.form.isCreateBill = value.isCreateBill == '1' ? value.isCreateBill.toString() : '0'
      this.form.labelList = value.labelList && value.labelList.length > 0 ? value.labelList.map(item => item.labelId) : []
      let imgList = value.galleryList && value.galleryList.length > 0 ? value.galleryList.filter(item => item.type === 0).map(item => item.url) : [] //图片
      let videoList = value.galleryList && value.galleryList.length > 0 ? value.galleryList.filter(item => item.type === 1).map(item => item.url) : [] //视频
      this.imgList = imgList || []
      this.videoList = videoList || []
    },
    submitEvent() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          console.log(this.form, 'form')
          this.$emit('parmeChange', this.form)
        } else {
          console.log('error submit!!')
          this.$emit('parmeChange', false)
          return false
        }
      })
    }
  }
}
</script>
<style scoped lang="less"></style>

